<script setup lang="ts">
import { useVideoPlayerStore } from '@/store/modules/earlyWarning/useVideoPlayerStore';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';

const { handleDeviceClick } = useVideoPlayerStore();
const { realPlayUrl, xlVideoDevices, xlVideoType, realParams, realCameraType, reValue } = storeToRefs(useVideoPlayerStore());
</script>

<template>
  <div class="video-container">
    <el-select
      v-model="reValue"
      filterable
      placeholder="请选择"
      @change="handleDeviceClick($event, COMPONENT_TITLES.REAL_TIME_MONITORING)"
      class="select_box"
      popper-class="select-popper"
      :popper-append-to-body="false"
    >
      <el-option v-for="item in xlVideoDevices" :key="item.code" :label="item.name" :value="item.code"></el-option>
    </el-select>
    <div class="video-box">
      <videoComManagement
        id="realTimeMonitoring"
        :value="realPlayUrl"
        :video-type="xlVideoType"
        :camera-index-code="realParams.cameraIndexCode"
        :camera-type="realCameraType"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.video-container {
  width: 400px;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .video-box {
    width: 100%;
    height: 80%;
  }

  .select_box {
    :deep(.el-select__wrapper) {
      background-color: rgba(30, 109, 235, 0.2);
      box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6);
      border: none;
    }

    :deep(.el-input__inner) {
      color: white !important; // 字体色
      box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6); // 添加内阴影
    }

    :deep(.el-select__placeholder) {
      color: white;
      opacity: 0.9;
    }
  }
}

@media (min-width: 3840px) {
  .video-container {
    height: 270px;
  }
}
</style>
